<template>
  <div>
    <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
  >
    <el-menu-item :index='key' 
    v-for="(item,key) in view.menuList"
     :key="key"
     >
     <a :href="'#/main/'+item.com">{{item.msg}}</a></el-menu-item>
    <div class="flex-grow" />
  </el-menu>
  <router-view></router-view>
  </div>
</template>

<script setup>
import { ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import { userMenu } from '../model/user.js'
import cominfo from '../components/comInfo.js'
const activeIndex = ref(0)
const router = useRouter()
const route = useRoute()
const view = reactive({menuList:[]})
onMounted(async()=>{
  let token = window.localStorage.getItem('token')
  let {data} = await userMenu()
  if(data.code==200){
    let menuList = data.menuList
    if(menuList.length){
      view.menuList = menuList
       menuList.forEach(item=>{
      router.addRoute('main',{path:item.com,name:item.com,component:cominfo[item.com]})
      })
       router.push("/main/"+menuList[0].path)
    }else{
    router.push('/main')
    }
  }else{
    router.push('/')
  }
})
</script>

<style>

</style>